<template>
  <div class="task-list">
    <div v-if="isDrag" id="drag" class="drag-node">{{dragObject.taskName}}</div>
    <div class="search">
      <el-input placeholder="请输入内容" size="mini" v-model="searchText">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
    </div>
    <div class="table">
      <el-table
        ref="singleTable"
        :data="dataList">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column label="任务名称" property="taskName" width="120"></el-table-column>
        <el-table-column label="备注" property="remark" show-overflow-tooltip>
          <template slot-scope="scope">
            {{scope.row.remark ? scope.row.remark : "--"}}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="showHandleClick(scope.row)" type="text" size="mini"><i class="el-icon-view"></i></el-button>
            <el-button type="text" size="mini">
              <i class="el-icon-rank rank-icon" @mousedown="move($event, scope.row)" v-if="!disabled"></i>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pager">
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="query.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        layout="prev, pager, next, jumper"
        :total="query.total">
      </el-pagination>
    </div>

    <!--任务详情弹窗-->
    <task-item-details v-if="isDetails" :isDetails="isDetails" :taskData="taskData" @closeDetail="closeDetail" />

  </div>
</template>
<script>
  import taskItemDetails from './TaskItemDetails'

  export default{
    components: {
      taskItemDetails
    },
    name:'taskList',
    props: {
      disabled: {
        type: Boolean,
        default: false
      }
    },
    data(){
      return {
        dataList: [],
        query: {
          pageSize: 10,
          pageNum: 1,
          total: 0,
          taskName: ""
        },
        searchText: "",
        isDrag: false,
        dragObject: null,
        isDetails: false,
        taskData: {}
      }
    },
    created(){
      this.onloadTaskList()
    },
    watch: {
      searchText(val) {
        this.query.taskName = val;
        this.onloadTaskList();
      }
    },
    methods:{
      /**加载任务列表**/
      onloadTaskList(){
        this.$http.get('/task/page', {
          params: this.query
        }).then((res)=>{
          this.dataList = res.list
          this.query.total = res.total
          })
      },
      /**拖拽**/
      move(e, row) {
        this.dragObject = row;
        //获取目标元素
        let odiv = e.target;
        //算出鼠标相对元素的位置
        let disX = e.clientX - odiv.offsetLeft;
        let disY = e.clientY - odiv.offsetTop;
        //鼠标按下并移动的事件
        document.onmousemove = (e)=>{
          //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
          let left = e.pageX - 230;
          let top = e.pageY - 230;
          //移动当前元素
          $("#drag").css({ left: left + 'px', top: top + 'px', opacity: .8});
          this.isDrag = true;
        };
        //松开拖动
        document.onmouseup = (e) => {
          let obj = e.target; //拖拽到的目的地对象
          console.log("ID: ", $(obj).attr("id"));
          if ($(obj).attr("id") === "canvas") {
            //当前对象的坐标
            this.dragObject.x = e.offsetX;
            this.dragObject.y = e.offsetY;
            this.$emit("dragCall", this.dragObject);
          }
          document.onmousemove = null;
          document.onmouseup = null;
          this.isDrag = false;
        };
      },
      sizeChange(val) {
        this.query.pageSize = val;
        this.onloadTaskList();
      },
      currentChange(val) {
        this.query.pageNum = val;
        this.onloadTaskList()
      },
      /**查看任务详情**/
      showHandleClick(data){
        this.taskData = JSON.parse(JSON.stringify(data));
        this.isDetails = false;
        this.$nextTick(() => {
          this.isDetails = true;
        })
      },
      /**关闭详情窗口**/
      closeDetail() {
        this.isDetails = false
      },
    }
  }
</script>
<style lang="less" scoped>
  .task-list{
    height: 100%;
    box-sizing: border-box;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    .table{
      width: 100%;
      height: calc(100% - 39px - 43px - 50px);
      overflow-y: auto;
      overflow-x: hidden;
      .rank-icon{
        display: inline-block;
        color: #0aa8e9;
        cursor: all-scroll;
        font-size: 16px;
        margin-left: 10px;
        position: relative;
        top: 2px;
        z-index: 9;
        &:hover{
          color: #2fb0ff;
        }
      }
    }
    .pager {
      width: 100%;
      padding: 15px;
      box-sizing: border-box;
    }
  }
  .search{
    padding-bottom: 15px;
  }
</style>
